<template>
  <div id="app">
    <!-- 头部 -->
    <van-nav-bar :z-index="10" fixed title="云音乐" @click-left="$router.push('/index');">
      <template #left>
        <van-icon name="music-o" size="1rem" color="red" />
      </template>
    </van-nav-bar>
    <!-- 渲染的位置 -->
    <!-- 保存原先的状态 -->
    <keep-alive include="MusicList,MvList,GedanList,RemenGeshou,Search,GedanDetail,GeshouDetail">
      <router-view :key="$route.fullPath" />
    </keep-alive>
    <!-- 底部 导航栏 -->
    <van-tabbar :z-index="3" route v-model="active" active-color="#ee0a24" inactive-color="#000">
      <van-tabbar-item to="/index" icon="wap-home-o">发现</van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="/remengeshou">歌手</van-tabbar-item>
      <van-tabbar-item to="/rank" icon="chart-trending-o">排行</van-tabbar-item>
      <van-tabbar-item icon="search" to="/search">搜索</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 当前激活的导航栏
      active: 0,
    };
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar{
  background-color: white;
  /deep/ .van-nav-bar__content{
    height: 100/50rem;
    line-height: 100/50rem;
  }
  /deep/ .van-nav-bar__title{
    color: red;
    font-size: 40/50rem;
  }
}
.van-tabbar{
  height: 100/50rem;
  line-height: 100/50rem;
  .van-tabbar-item__icon{
    img{
      height: 50/50rem;
    } 
  }
  .van-tabbar-item{
    font-size: 28/50rem;
  }
  /deep/ .van-tabbar-item__icon  .van-icon{
    font-size: 40/50rem;
  }
}
</style>
